<template>
    <div>
      <div>
        <el-table ref="multipleTableRef" :data="tabledata" style="width: 100%" >
            <el-table-column type="selection" width="55" />
            <el-table-column property="name" label="患者姓名" width="120" />
            <el-table-column property="jzid" label="就诊卡号" width="120" />
            <el-table-column property="sfzid" label="身份证号" width="120" />
            <el-table-column property="sjid" label="手机号码" width="120" />
            <el-table-column property="ghks" label="挂号科室" width="120" />
            <el-table-column property="ghlx" label="挂号类型" width="120" />
            <el-table-column property="ghf" label="挂号费" width="120" />
            <el-table-column property="ghzt" label="挂号状态" width="120" />
            <el-table-column property="jzrq" label="就诊日期" width="120" />
            <el-table-column property="hzsj" label="候诊时间" width="120" />
            <el-table-column property="yysj" label="预约时间" width="120" />
            <el-table-column property="cz" label="操作" width="120" />
        </el-table>
      </div>

        <div class="demo-pagination-block">
          <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :page-sizes="[10, 20, 30, 40]"
            :small="small"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { ElTable } from 'element-plus'
import type {IRegisterUser} from '@/typings/RegisterUser'
interface Iprops{
  tabledata:IRegisterUser[]
  total:number
  pageSize:number
  loadData:(currentPage:number,pageSize:number,formdata?:Record<string, string>)=> void
  currentPage:number
}
const props = defineProps<Iprops>()
const small = ref(false)
const background = ref(false)

const handleSizeChange = (val: number) => {
  props.loadData(props.currentPage,val)
}

const handleCurrentChange = (page: number) => {
  props.loadData(page,props.pageSize)
}

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<IRegisterUser[]>([])

</script>

<style scoped>
.demo-pagination-block{
    float:right;
    margin-top: 10px;
}
/* .demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
} */

</style>